<template>
  <div class="container">
    <div class="app-container">
      <el-button type="primary" size="mini" class="addBtn" @click="showExcelDialog = true">添加权限</el-button>
      <el-table :data="tableData" row-key="id" default-expand-all>
        <!-- 名称 -->
        <el-table-column prop="name" label="名称">
          <template v-slot="{ row }">
            <span v-if="!row.isEdit">{{ row.name }}</span>
            <el-input v-else v-model="row.editData.name" placeholder="请输入名称" />
          </template>
        </el-table-column>
        <!-- 标识 -->
        <el-table-column prop="code" label="标识">
          <template v-slot="{ row }">
            <span v-if="!row.isEdit">{{ row.code }}</span>
            <el-input v-else v-model="row.editData.code" placeholder="请输入标识" />
          </template>
        </el-table-column>
        <!-- 描述 -->
        <el-table-column prop="description" label="描述">
          <template v-slot="{ row }">
            <span v-if="!row.isEdit">{{ row.description }}</span>
            <el-input
              v-else
              v-model="row.editData.description"
              type="textarea"
              :rows="3"
              placeholder="请输入描述"
            />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <!-- 未编辑状态 -->
            <template v-if="!row.isEdit">
              <el-button
                v-if="row.type === 1"
                type="text"
                size="mini"
                class="addBtn"
                @click="addPermissionBtn(row.id)"
              >添加</el-button>
              <el-button type="text" size="mini" class="addBtn" @click="editBtn(row)">编辑</el-button>
              <el-button type="text" size="mini" class="addBtn" @click="delBtn(row.id)">删除</el-button>
            </template>
            <!-- 进入编辑状态 -->
            <template v-else>
              <el-button size="mini" @click="row.isEdit = false">取 消</el-button>
              <el-button size="mini" type="primary" @click="isEditBtn(row)">确 定</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Details
      :show-excel-dialog.sync="showExcelDialog"
      :show-excel-dialog-id.sync="showExcelDialogId"
      @uploadData="getPermissionData"
    />
    <el-dialog title="提示" :visible="delShowDialog" @close="delShowDialog = false">
      <span>确定删除该数据吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="isDel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPermissionDataAPI,
  delPermissionAPI,
  putPermissionAPI
} from '@/api/permission'
import { transListToTreeData } from '@/utils/index'
import Details from './components/details.vue'

export default {
  name: 'Permission',
  components: { Details },
  data() {
    return {
      tableData: [],
      // 是否显示弹出层
      showExcelDialog: false,
      // 是在哪一个id数据下面添加数据
      showExcelDialogId: null,
      // 删除数据弹出层
      delShowDialog: false
    }
  },
  created() {
    this.getPermissionData()
  },
  methods: {
    // 初始化数据
    async getPermissionData() {
      this.tableData = transListToTreeData(await getPermissionDataAPI(), 0)
      // 给每一个数据都添加一个可双向变动的属性/数据
      this.addTypeData(this.tableData)
    },
    // 点击操作里面的数据执行的操作
    addPermissionBtn(id) {
      this.showExcelDialogId = id
      this.showExcelDialog = true
    },
    // 删除数据
    delBtn(id) {
      this.showExcelDialogId = id
      this.delShowDialog = true
    },
    async isDel() {
      // 删除接口
      await delPermissionAPI(this.showExcelDialogId)
      // 重新初始化数据
      this.getPermissionData()
      // 关闭弹出层
      this.delShowDialog = false
      // 提示
      this.$message.success('删除成功')
    },
    // 点击进入编辑状态
    editBtn(row) {
      row.isEdit = true
      // 进入编辑之前把数据回填到初始化数据
      row.editData.name = row.name
      row.editData.code = row.code
      row.editData.description = row.description
    },
    // 确定编辑
    async isEditBtn(row) {
      if (row.editData.name && row.editData.code && row.editData.description) {
        const newObj = {
          ...row.editData,
          id: row.id,
          enVisible: row.enVisible,
          pid: row.pid,
          type: row.type
        }
        await putPermissionAPI(newObj)
        this.$message.success('修改成功')
        // 修改数值 注: 此处修改的数据是...row.editData 不是 ...row.newObj
        Object.assign(row, {
          ...row.editData,
          isEdit: false
        })
      } else {
        this.$message.error('名称/标识/描述 不能为空')
      }
    },
    // 递归给数据添加属性
    addTypeData(list) {
      list.forEach(item => {
        this.$set(item, 'isEdit', false)
        this.$set(item, 'editData', {
          name: item.name,
          code: item.code,
          description: item.description
        })
        if (item.children) this.addTypeData(item.children)
      })
      return list
    }
  }
}
</script>

<style scoped lang="scss">
.addBtn {
  margin: 10px;
}
</style>

